<template>
	<gracePage headerBG="#FFFFFF" :customHeader="false">
		<view slot="gBody" class="grace-body">
			<view class="grace-space-between">
				<view class="grace-waterfall-item" v-for="(lists, index1) in productList" :key="index1">
					<view class="grace-img-card-item" v-for="(products, index2) in lists" :key="index2">
						<image :src="products.img" mode="widthFix" class="grace-waterfall-img"></image>
						<text class="grace-img-card-title">标题文字</text>
						<view class="grace-img-card-more">
							<text class="grace-img-card-price">￥99.99</text>
							<text class="grace-img-card-btn">按钮</text>
						</view>
					</view>
				</view>
			</view>
			<graceLoading :loadingType="loadingType"></graceLoading>
		</view>
	</gracePage>
</template>
<script>
import gracePage from "../../graceUI/components/gracePage.vue";
import graceLoading from "../../graceUI/components/graceLoading.vue";
var dataObj = require('../../graceUI/demoData/data.js');
var products = dataObj.products;
var page = 1;
export default {
    data() {
    	return {
			loadingType: 3,
			productList : [[],[]]
		}
    },
	onLoad: function (options) {
		this.getList();
	},
	//上拉加载更多
	onReachBottom:function(){
		this.getList();
	},
	methods:{
		getList : function(){
			//避免重复加载
			if(this.loadingType != 3){return ;}
			//最后一页判断
			if(page > 3){this.loadingType = 2; return;}
			this.loadingType = 1;
			//模拟api请求延迟关闭 Loading
			setTimeout(()=>{
				var lArr = this.productList[0];
				var rArr = this.productList[1];
				//填充数组[此处的 products 数据应该来自与api接口数据]
				//数据格式见 "/data/data.js"
				products = dataObj.getArrRandomly(products); //打乱排序【模拟api】
				for (var i = 0; i < products.length; i++) {
					if (i % 2 == 0) {
						lArr.push(products[i]);
					} else {
						rArr.push(products[i]);
					}
				}
				this.productList = [lArr, rArr];
				this.loadingType = 3;
				page++;
			}, 1000);
		}
	},
	components:{gracePage, graceLoading}
}
</script>
<style>
.grace-waterfall-item{width:340rpx;}
.grace-waterfall-img{width:340rpx;}
</style>